<style lang="scss" scoped>
.home-header {
    background: #fff;
    .home-header-top {
        height: 80px;
        .home-header-top-right {
            float: right;
            line-height: 60px;
            li {
                float: left;
                font-size: 16px;
                color: #1996cd;
                .header-phone {
                    font-weight: 700;
                    color: #1996cd;
                }
                .el-button--primary {
                    background: #1996cd;
                    &:hover {
                        opacity: 0.8;
                    }
                }
                .top-own a {
                    color: #1996cd;
                    font-size: 12px;
                    font-weight: 700;
                }
            }
            li+li {
                margin-left: 20px;
            }
        }
    }
    .home-header-nav {
        background: rgba(25, 150, 205, 1);
        height: 40px;
        box-shadow: 0 5px 5px #666;
        .nav-inner {
            width: 1200px;
            margin: auto;
            height: 100%;
            line-height: 40px;
            &>li {
                float: left;
                color: #fff;
                font-size: 16px;
                padding-left: 20px;
                padding-right: 20px;
                .nav-info {
                    display: none;
                    width: 100%;
                    padding-top: 10px;
                    padding-bottom: 10px;
                    background: rgba(255, 255, 255, 0.9);
                    position: absolute;
                    z-index: 999;
                    left: 0;
                    box-shadow: 0 1px 5px rgba(0, 0, 0, .11);
                    .nav-info-inner {
                        @media (min-width: 768px) {
                            width: 750px;
                        }
                        @media (min-width: 992px) {
                            width: 870px;
                        }
                        @media (min-width: 1200px) {
                            width: 1200px;
                        }
                        margin:auto;
                        .goods {
                            margin-top: 10px;
                            &>li {
                                float: left;
                                &>div {
                                    height: 30px;
                                    line-height: 30px;
                                    float: left;
                                    font-size: 14px;
                                    .round {
                                        width: 10px;
                                        height: 10px;
                                        float: left;
                                        border-radius: 50%;
                                        margin-top: 10px;
                                        border: 1px solid #1996cd;
                                    }
                                    span {
                                        color: #1996cd;
                                        padding-left: 10px;
                                    }
                                    &:hover {
                                        .round {
                                            background: #1996cd;
                                        }
                                        span {
                                            color: #ff6600;
                                        }
                                    }
                                }
                            }
                            &>li+li {
                                margin-left: 20px;
                            }
                        }
                        .nav-txt {
                            width: 600px;
                            float: left;
                            padding-left: 20px;
                            padding-right: 20px;
                            line-height: 20px;
                            color: #000;
                        }
                    }
                }
                &:hover {
                    color: #ff6600;
                    &:after {
                        content: '';
                        width: 100%;
                        height: 3px;
                        float: left;
                        background: #ff6600;
                        margin-top: -3px;
                    }
                    .nav-info {
                        display: block;
                    }
                }
            }
        }
    }
}
</style>
<template>
    <div id="header" class="home-header">
        <div class="home-header-top">
            <Row style="padding:10px 20px;">
                <Col span="12">
                <div>
                    <a href="http://www.dchealth.com" target="_blank"><img style="width: 191px;height:50px;margin-top: 5px;" src='/static/images/logo.png' /></a>
                </div>
                </Col>
                <Col span="12">
                <ul class="home-header-top-right">
                    <li>
                        <Icon type="ios-telephone" color="#1996CD" size="16"></Icon>
                        <span class="header-phone">010-86452200</span>
                    </li>
                    <!-- <li>
                                    <el-button size="small" type="primary">联系客服</el-button>
                                </li> -->
                    <li>
                        <div class="top-own">
                            <div v-if="currentUserName">
                                <Avatar icon="person" style="margin-right:-20px;" />
                                <router-link to="/main" class="avatar-admin" style="margin-left:30px;">{{currentUserName}}</router-link>
                            </div>
                            <div v-else>
                                <el-button size="small" type="primary" href="javascript:;" @click="loginModal" class="active">登录</el-button>
                            </div>

                        </div>
                    </li>
                </ul>
                </Col>
            </Row>
        </div>
        <div class="home-header-nav">
            <ul class="nav-inner container">
                <li style="cursor:pointer;">首页</li>
                <li>关于我们</li>
                <li>
                    精准医学
                    <div class="nav-info">
                        <div class="nav-info-inner">
                            <div style="width:192px;height:122px;float:left;">
                                <img src="/static/images/home/gene.jpg" style="width:100%;height:100%;" />
                            </div>
                            <div style="float:left;margin-left: 50px;">
                                <p style="font-size:18px;color:#1996cd;">产品中心</p>
                                <ol class="goods">
                                    <li>
                                        <div style="cursor:pointer;">
                                            <div class="round"></div>
                                            <span>罕见病精准医学</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div style="cursor:pointer;">
                                            <div class="round"></div>
                                            <span>肿瘤精准医学</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <div class="round"></div>
                                            <span>药物基因组精准分析</span>
                                        </div>
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </li>
                <li>组学云平台</li>
                <li>科研合作</li>
            </ul>
        </div>
        <Modal v-model="loginShow" width="350" :mask-closable="false"> 
            <div slot='header' style='font-size: 18px;color: #333;text-align: center;'>用户登录</div>
            <div class="login-inner">
                <Form ref='formLogin' :model="formLogin" :rules="ruleLogin">
                    <FormItem prop="email">
                        <Input type="text" id="useremail" v-model="formLogin.username" placeholder="请输入用户名" @on-enter="next">
                        <Icon type="android-mail" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                    <FormItem prop="password">
                        <Input type="password" id="userpassword" name="password" v-model="formLogin.password" placeholder="请输入密码" @on-enter="login('formLogin')">
                        <Icon type="ios-locked" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                    <div style="margin-top:18px;">
                        <div>
                            <template>
                                <Checkbox v-model="rememberPassword" @on-change="rememberPw">记住密码</Checkbox>
                                <a href="" style="float:right;color:#199ed8;">忘记密码？</a>
                            </template>
                        </div>
                    </div>
                    <!-- <FormItem style="width:280px;margin-top:10px;">
                            <Button type="primary" @click="login('formLogin')" style="width:280px;margin-top:15px;" :loading="load">登录</Button>
                        </FormItem> -->
                </Form>
            </div>
            <div slot='footer' style="text-align:center">
                <Button type="primary" @click="login('formLogin')" style="width:280px;margin-top:15px;" :loading="load">登录</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import { setCookie, getCookie, delCookie } from '@/common/js/cookie.js';
//引入登录方法
import {
    login
} from 'api/index.js'
export default {
    name: "header",
    data() {
        // 验证邮箱是否为空
        let validateLoginEmail = (rule, value, callback) => {
            /**验证邮箱**/
            // if (!(/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(value))) {
            //     return callback(new Error('邮箱不能为空或邮箱错误'));
            // } else {
            //     callback();
            // }

            if (value === '') {
                return callback(new Error('用户名不能为空'));
            } else {
                callback();
            }
        };
        // 验证密码是否为空
        let validateLoginPassword = (rule, value, callback) => {
            if (value === '') {
                return callback(new Error('密码不能为空'));
            } else {
                callback();
            }
        };
        return {
            currentUserName: '',
            formLogin: '',
            loginShow: false,
            rememberPassword: false,
            load: false,
            formLogin: {
                username: '', //用户名
                password: ''  //密码
            },
            ruleLogin: {
                email: [{
                    validator: validateLoginEmail,
                    trigger: 'blur'
                }],
                password: [{
                    validator: validateLoginPassword,
                    trigger: 'blur'
                }]
            }
        }
    },
    methods: {
        getCookieValue() {
            let userName = this.$store.state.username;
            if (getCookie('userid')) {
                this.currentUserName = userName;
            } else {
                this.currentUserName = "";
            }
        },
        loginModal() {
            // this.$router.push("/login");
            /*打开登陆弹窗登陆*/
            // this.loginShow=true;
            // this.watchCheckbox();
            /*直接登陆*/
            this.quickLogin();
        },
        next() {
            $("input[name=password]").focus();
        },
        watchCheckbox() {
            if (getCookie("rememberPassword")) {
                this.formLogin = {
                    username: getCookie('username'),
                    password: getCookie('passWord')
                }
                this.rememberPassword = true;
                console.log(this.formLogin)
            } else {
                this.formLogin = {
                    username: "",
                    password: ""
                };
                this.rememberPassword = false;
            }
        },
        // 记住密码
        rememberPw(val) {
            this.rememberPassword = val ? val : false;
        },
        quickLogin(){
            $ajax.defaults.headers.common['Authorization'] = '';
            this.$store.state.token = '';
            let obj = {
                'username': "admin",
                'password': "0p-0p-0p-"
            }
            login.userLogin(obj).then((data) => {
                if (data.jwt && data.user) {
                    if (this.rememberPassword == true) {
                        delCookie("username");
                        delCookie("passWord");
                        delCookie('rememberPassword');
                        setCookie('passWord', obj.password, '360');                               
                        setCookie('rememberPassword', true, '360');
                    } else {
                        if (getCookie("username") || getCookie("passWord")) {
                            delCookie("username");
                            delCookie("passWord");
                            delCookie('rememberPassword');
                        }
                    }
                    setCookie('userid', data.user.userid, null);
                    setCookie('token', "Bearer" + data.jwt.access_token, null);
                    setCookie('username', obj.username, '360');
                    $ajax.defaults.headers.common['Authorization'] = "Bearer" + data.jwt.access_token;
                    this.$router.push("/main");
                } else {
                    this.$Message.error(data)
                }
            }).catch((error) => {
                
            })
        },
        login(name) {
            $ajax.defaults.headers.common['Authorization'] = '';
            this.$store.state.token = '';
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.load = true;
                    let obj = {
                        'username': this.formLogin.username,
                        'password': this.formLogin.password
                    }
                    login.userLogin(obj).then((data) => {
                        console.log(data)
                        if (data.jwt && data.user) {
                            if (this.rememberPassword == true) {
                                delCookie("username");
                                delCookie("passWord");
                                delCookie('rememberPassword');
                                setCookie('passWord', obj.password, '360');                               
                                setCookie('rememberPassword', true, '360');
                            } else {
                                if (getCookie("username") || getCookie("passWord")) {
                                    delCookie("username");
                                    delCookie("passWord");
                                    delCookie('rememberPassword');
                                }
                            }
                            setCookie('userid', data.user.userid, null);
                            setCookie('token', "Bearer" + data.jwt.access_token, null);
                            setCookie('username', obj.username, '360');
                            $ajax.defaults.headers.common['Authorization'] = "Bearer" + data.jwt.access_token;
                            this.$router.push("/main");
                        } else {
                            this.$Message.error(data)
                        }
                        this.load = false;
                    }).catch((error) => {
                        this.load = false;
                    })
                }
            })

        }
    },
    created() {
        this.getCookieValue();
    }
}
</script>
